<template>
	<view class="page">
		<!-- 发货信息 -->
		<view class="shipping-info">
			<view class="shipping-status">
				<view class="status-text">
					<view class="status-title">{{orderInfo.status}}</view>
					<view class="status-desc">还剩{{orderInfo.autoConfirmTime}}自动确认收货</view>
				</view>
				<view class="status-icon">
					<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M55 20H45V10H10C6.7 10 4 12.7 4 16V44H10C10 48.4 13.6 52 18 52C22.4 52 26 48.4 26 44H38C38 48.4 41.6 52 46 52C50.4 52 54 48.4 54 44H60V30L55 20ZM18 48C15.8 48 14 46.2 14 44C14 41.8 15.8 40 18 40C20.2 40 22 41.8 22 44C22 46.2 20.2 48 18 48ZM55 24L58 30H45V24H55ZM46 48C43.8 48 42 46.2 42 44C42 41.8 43.8 40 46 40C48.2 40 50 41.8 50 44C50 46.2 48.2 48 46 48Z" fill="white"/>
					</svg>
				</view>
			</view>
		</view>

		<!-- 收货人信息 -->
		<view class="address-info">
			<view class="address-icon">
				<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M15 2C9.5 2 5 6.5 5 12C5 20 15 28 15 28C15 28 25 20 25 12C25 6.5 20.5 2 15 2ZM15 16C12.8 16 11 14.2 11 12C11 9.8 12.8 8 15 8C17.2 8 19 9.8 19 12C19 14.2 17.2 16 15 16Z" fill="#FF5722"/>
				</svg>
			</view>
			<view class="address-content">
				<view class="name-phone">{{orderInfo.receiver.name}} {{orderInfo.receiver.phone}}</view>
				<view class="address-detail">{{orderInfo.receiver.address}}</view>
			</view>
		</view>

		<!-- 快递信息 -->
		<view class="express-info" @click="viewLogistics">
			<view class="express-icon">
				<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M25 8H20V5H5C3.35 5 2 6.35 2 8V20H5C5 22.2 6.8 24 9 24C11.2 24 13 22.2 13 20H17C17 22.2 18.8 24 21 24C23.2 24 25 22.2 25 20H28V14L25 8ZM9 22C7.9 22 7 21.1 7 20C7 18.9 7.9 18 9 18C10.1 18 11 18.9 11 20C11 21.1 10.1 22 9 22ZM24 13H20V10H23L24 13ZM21 22C19.9 22 19 21.1 19 20C19 18.9 19.9 18 21 18C22.1 18 23 18.9 23 20C23 21.1 22.1 22 21 22Z" fill="#FFB300"/>
				</svg>
			</view>
			<view class="express-content">
				<view>{{orderInfo.express.status}}</view>
				<view>{{orderInfo.express.phone}}</view>
			</view>
			<view class="express-arrow">
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M8 4L14 10L8 16" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
			</view>
		</view>

		<!-- 拼团信息 -->
		<view class="group-info">
			<view class="group-status">
				<view class="group-icon">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M16 11C17.66 11 18.99 9.66 18.99 8C18.99 6.34 17.66 5 16 5C14.34 5 13 6.34 13 8C13 9.66 14.34 11 16 11ZM8 11C9.66 11 10.99 9.66 10.99 8C10.99 6.34 9.66 5 8 5C6.34 5 5 6.34 5 8C5 9.66 6.34 11 8 11ZM8 13C5.67 13 1 14.17 1 16.5V19H15V16.5C15 14.17 10.33 13 8 13ZM16 13C15.71 13 15.38 13.02 15.03 13.05C16.19 13.89 17 15.02 17 16.5V19H23V16.5C23 14.17 18.33 13 16 13Z" fill="#FF5722"/>
					</svg>
				</view>
				<view>{{orderInfo.groupBuy.status}}</view>
			</view>
			
			<view class="group-members">
				<view class="group-member leader">
					<image src="/static/avatar1.svg" mode="aspectFill"></image>
					<view class="leader-tag">团长</view>
				</view>
				<view class="group-member">
					<image src="/static/avatar2.svg" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="group-detail-btn" @click="viewGroupDetails">
				<text>拼团详情</text>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="product-info">
			<view class="product-image">
				<image src="/static/product.svg" mode="aspectFill"></image>
				<view class="group-tag">{{orderInfo.product.groupSize}}人团</view>
			</view>
			
			<view class="product-detail">
				<view class="product-title">{{orderInfo.product.name}}</view>
				<view class="product-spec">{{orderInfo.product.spec}}</view>
				<view class="product-price">
					<text class="price-symbol">¥</text>
					<text class="price-value">{{orderInfo.product.price}}</text>
					<text class="product-quantity">×{{orderInfo.product.quantity}}</text>
				</view>
			</view>
		</view>

		<!-- 价格信息 -->
		<view class="price-info">
			<view class="price-item">
				<text>商品总额：</text>
				<text>¥{{orderInfo.payment.total.toFixed(2)}}</text>
			</view>
			<view class="price-item">
				<text>运费：</text>
				<text>¥{{orderInfo.payment.shipping.toFixed(2)}}</text>
			</view>
			<view class="price-item">
				<text>商品优惠：</text>
				<text>-¥{{orderInfo.payment.discount.toFixed(2)}}</text>
			</view>
			<view class="price-item total">
				<text>实付款：</text>
				<text class="total-price">¥{{orderInfo.payment.actual.toFixed(2)}}</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<view class="action-btn refund-btn" @click="applyRefund">申请退款</view>
			<view class="action-btn logistics-btn" @click="viewLogistics">查看物流</view>
			<view class="action-btn confirm-btn" @click="confirmReceipt">确认收货</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 订单信息
const orderInfo = ref({
  status: '卖家已发货',
  autoConfirmTime: '7天4时',
  receiver: {
    name: '李小花',
    phone: '1885138766',
    address: '广东省广州市大华区明离路科技园880号'
  },
  express: {
    status: '您的快递已取出，如有问题可致电',
    phone: '2659-263696369'
  },
  groupBuy: {
    status: '拼团成功',
    members: [
      { avatar: '/static/avatar1.svg', isLeader: true },
      { avatar: '/static/avatar2.svg', isLeader: false }
    ]
  },
  product: {
    name: '艾丽苏抹茶蛋糕早点低糖健康',
    spec: '实惠装',
    price: 136,
    quantity: 1,
    image: '/static/product.svg',
    groupSize: 3
  },
  payment: {
    total: 136.00,
    shipping: 0.00,
    discount: 10.00,
    actual: 126.00
  }
});

// 查看物流
const viewLogistics = () => {
   uni.navigateTo({
    url: '/pages/my/order/logistics'
   })
};

// 申请退款
const applyRefund = () => {
  uni.showToast({
    title: '正在跳转到退款页面',
    icon: 'none'
  });
};

// 确认收货
const confirmReceipt = () => {
  uni.showModal({
    title: '确认收货',
    content: '确认已收到商品吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '收货成功',
          icon: 'success'
        });
        
        // 确认收货后返回订单列表
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    }
  });
};

// 拼团详情
const viewGroupDetails = () => {
  uni.showToast({
    title: '查看拼团详情',
    icon: 'none'
  });
};
</script>

<style>
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}
	
	.shipping-info {
		background-color: #FF5722;
		padding: 30rpx;
		color: white;
	}
	
	.shipping-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.status-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.status-desc {
		font-size: 28rpx;
	}
	
	.address-info, .express-info, .group-info, .product-info, .price-info {
		background-color: white;
		margin: 20rpx 0;
		padding: 30rpx;
		border-radius: 10rpx;
	}
	
	.address-info, .express-info {
		display: flex;
		align-items: flex-start;
	}
	
	.address-icon, .express-icon, .group-icon {
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	
	.address-content {
		flex: 1;
	}
	
	.name-phone {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.address-detail {
		font-size: 28rpx;
		color: #333;
	}
	
	.express-content {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}
	
	.express-arrow {
		margin-left: 20rpx;
	}
	
	.group-info {
		padding-bottom: 20rpx;
	}
	
	.group-status {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: #333;
	}
	
	.group-members {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.group-member {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	
	.group-member image {
		width: 100%;
		height: 100%;
	}
	
	.leader-tag {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FF5722;
		color: white;
		font-size: 22rpx;
		text-align: center;
		padding: 2rpx 0;
	}
	
	.group-detail-btn {
		text-align: right;
	}
	
	.group-detail-btn text {
		display: inline-block;
		color: #FF5722;
		font-size: 28rpx;
		border: 1px solid #FF5722;
		border-radius: 30rpx;
		padding: 10rpx 30rpx;
	}
	
	.product-info {
		display: flex;
		padding: 20rpx;
	}
	
	.product-image {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}
	
	.product-image image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}
	
	.group-tag {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #FF5722;
		color: white;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 0 16rpx 0 8rpx;
	}
	
	.product-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.product-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.product-spec {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.product-price {
		display: flex;
		align-items: baseline;
	}
	
	.price-symbol {
		font-size: 26rpx;
	}
	
	.price-value {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.product-quantity {
		font-size: 26rpx;
		color: #999;
		margin-left: auto;
	}
	
	.price-info {
		padding: 30rpx;
	}
	
	.price-item {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.price-item.total {
		padding-top: 20rpx;
		border-top: 1px solid #f0f0f0;
		font-weight: bold;
	}
	
	.total-price {
		color: #FF5722;
		font-size: 32rpx;
	}
	
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		background-color: white;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.action-btn {
		padding: 16rpx 30rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
	}
	
	.refund-btn, .logistics-btn {
		border: 1px solid #FF5722;
		color: #FF5722;
		background-color: white;
	}
	
	.confirm-btn {
		background-color: #FF5722;
		color: white;
	}
</style>
